<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>登录</title>
<style>
.code {
	font-family: Arial;
	font-style: italic;
	color: blue;
	font-size: 30px;
	border: 0;
	padding: 2px 3px;
	letter-spacing: 3px;
	font-weight: bolder;
	float: left;
	cursor: pointer;
	width: 150px;
	height: 50px;
	line-height: 60px;
	text-align: center;
	vertical-align: middle;
	background-color: #D8B7E3;
}

span {
	text-decoration: none;
	font-size: 12px;
	color: #288bc4;
	padding-left: 10px;
}

span:hover {
	text-decoration: underline;
	cursor: pointer;
}
</style>
<link rel="stylesheet" href="../css/pintuer.css">
<link rel="stylesheet" href="../css/admin.css">
<script src="../js/jquery.js"></script>
<script src="../js/pintuer.js"></script>
<!-- 引入layui的样式文件 -->
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<!-- 引入layui的脚本文件 -->
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div class="bg"></div>
	<div class="container">
		<div class="line bouncein">
			<div class="xs6 xm4 xs3-move xm4-move">
				<div style="height: 150px;"></div>
				<div class="media media-y margin-big-bottom"></div>
				<form class="layui-form" id="form">
					<div class="panel loginbox">
						<div class="text-center margin-big padding-big-top">
							<h1>后台管理中心</h1>
						</div>
						<div class="panel-body"
							style="padding: 30px; padding-bottom: 10px; padding-top: 10px;">
							<div class="form-group">
								<div class="field field-icon-right">
									<input type="text" class="input input-big" name="userName"
										placeholder="登录账号" data-validate="required:请填写账号" /> <span
										class="icon icon-user margin-small"></span>
								</div>
							</div>
							<div class="form-group">
								<div class="field field-icon-right">
									<input type="password" class="input input-big" id="pwd"
										name="userPwd" placeholder="登录密码"
										data-validate="required:请填写密码" /> <span
										class="icon icon-key margin-small"></span>
								</div>
							</div>
							<div class="form-group" style="margin-top: 20px">
								<div class="field">
									<div id="checkCode" class="code" onclick="createCode(4)"></div>
									<span onclick="createCode(4)">看不清换一张</span>
								</div>
							</div>
							<div class="form-group" style="margin-top: 50px">
								<div class="field">
									<input type="text" placeholder="验证码" class="input input-big"
										id="inputCode" name="code" onblur="validateCode()" /> <span
										id="codeTip"></span>
								</div>
							</div>
						</div>
						<div style="padding: 30px;">
							<button class="button button-block bg-main text-big input-big"
								lay-submit lay-filter="subBtn">登录</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

	<!--MD5加密-->
	<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
	<!-- 脚本开始 -->
	<script>
		//页面加载时，生成随机验证码
		window.onload = function() {
			createCode(4);
		}

		//生成验证码的方法
		function createCode(length) {
			var code = "";
			var codeLength = parseInt(length); //验证码的长度
			var checkCode = document.getElementById("checkCode");
			////所有候选组成验证码的字符，当然也可以用中文的
			var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b',
					'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
					'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
					'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L',
					'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
					'Y', 'Z');
			//循环组成验证码的字符串
			for (var i = 0; i < codeLength; i++) {
				//获取随机验证码下标
				var charNum = Math.floor(Math.random() * 62);
				//组合成指定字符验证码
				code += codeChars[charNum];
			}
			if (checkCode) {
				//为验证码区域添加样式名
				checkCode.className = "code";
				//将生成验证码赋值到显示区
				checkCode.innerHTML = code;
			}
		}

		//检查验证码是否正确
		function validateCode() {
			//获取显示区生成的验证码
			var checkCode = document.getElementById("checkCode").innerHTML;
			//获取输入的验证码
			var inputCode = document.getElementById("inputCode").value;
			console.log(checkCode);
			console.log(inputCode);
			if (inputCode.length <= 0) {
				$("#codeTip").html("请输入验证码").css("color", "red")
			} else if (inputCode.toUpperCase() != checkCode.toUpperCase()) {
				$("#codeTip").html("验证码输入有误！").css("color", "red")
				createCode(4);
			} else {
				layui.use([ 'form', 'layer' ], function() {
					var form = layui.form;
					var $ = layui.$;
					var layer = layui.layer;

					//表单提交
					form.on('submit(subBtn)', function(data) {
						var url = "UserServletAdmin?method=getUser";//请求地址
						data.field.userPwd = md5(data.field.userPwd);
						console.log(data.field.userPwd);
						//ajax请求服务器,判断结果
						$.post(url, data.field, function(res) {
							console.log(res);
							if (res.code == 0) {//登陆成功
								layer.msg(res.msg);
								//跳转到首页
								location.href = "index.jsp";
							} else {//失败
								layer.msg(res.msg);
							}

						}, "json")
						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});
				})
				$("#codeTip").html("验证码输入正确！").css("color", "green")
			}
		}
	</script>

</body>
</html>
